<template>
  <div class="message">
    <div style="margin-top: 20px;">
      <!-- <el-select class="select" v-model="selectDate" @change="initFrame()">
        <el-option
          v-for="item in options_selectDate"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>-->
      <el-form class="display">
        <!-- <el-form-item label="车牌" label-width="50px">
          <el-input placeholder="请输入车牌"> </el-input>
        </el-form-item>-->
        <!-- <el-form-item label="车辆类型" label-width="70px">
          <el-input placeholder="请输入车辆类型" style="font-size:12px;"> </el-input>
        </el-form-item>
        <el-form-item label="运输来源单位类型" label-width="130px">
          <el-input placeholder="请输入运输来源单位类型"> </el-input>
        </el-form-item>-->
        <el-form-item label="车牌号码：" label-width="100px">
          <el-input
            v-model="carnumber"
            placeholder="请输入车牌号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="来源类型：" label-width="100px">
          <!-- <el-cascader v-model="form.groupingValue" :options="groupingList" style="line-height: 26px;"></el-cascader> -->
          <el-select v-model="carWorktype" placeholder="请选择来源类型">
            <el-option
              v-for="item in selectWorktype"
              :key="item.index"
              :label="item.TYPE"
              :value="item.index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型：" label-width="100px" style="margin-right:15px">
          <el-input v-model="cartype" placeholder="请输入车辆类型"></el-input>
        </el-form-item>
        <!-- <p><b>车辆数量：</b><span>323</span>辆</p> -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="mohu">搜索</el-button>
          <!-- <el-button type="danger" icon="el-icon-circle-close">清空</el-button> -->
          <!-- <el-button type="success" icon="el-icon-circle-plus-outline" @click="addlistdatadiglog()">新增</el-button> -->
          <!-- <el-button type="primary" @click="exportToExcel()" style="background: #409eff; border: 1px solid #409eff"
              >导出列表</el-button
          >-->
        </el-form-item>
      </el-form>
      <!-- <el-select class="select" v-model="selectDistrict" placeholder="请选择小区" @change="initFrame()">
        <el-option
          v-for="item in options_selectDistrict"
          :key="item.CLIENT_NO"
          :label="item.CLIENT_NAME"
          :value="item.CLIENT_NO"
        ></el-option>
      </el-select>-->
    </div>
    <div>
      <!-- <el-table
            :data="carList"
          style="width:100%">
            <el-table-column prop="VID" label="车牌号码" width="80"></el-table-column>
      <el-table-column prop="LICENSE_PLATE" label="车辆名称" width="110"></el-table-column>-->
      <!-- <el-table-column
                prop="RFID"
                label="RFID号"
                width="130">
      </el-table-column>-->
      <!-- <el-table-column prop="vehiclenumber" label="车牌号码" sortable width="110"></el-table-column>
            <el-table-column prop="grouping" label="分组" sortable width="150"></el-table-column>
            <el-table-column prop="vehiclename" label="车辆名称" width="75"></el-table-column>
            <el-table-column prop="communicationnumber" label="通讯卡号" width="75"></el-table-column>
            <el-table-column prop="vehicletype" label="车辆类型  " width="120"></el-table-column>
      <el-table-column prop="source" label="请输入运输来源单位类型" width="100"></el-table-column>-->
      <!-- <el-table-column prop="CAR_TYPE" label="车辆类型"></el-table-column>
            <el-table-column prop="ORIENTATION_TIME" label="最终定位时间" sortable width="170"></el-table-column>
            <el-table-column prop="POSITION" label="位置" width="220"></el-table-column>
            <el-table-column prop="Direction" label="航向"></el-table-column>
            <el-table-column prop="SPEED" label="航速"></el-table-column>
            <el-table-column prop="LONGITUDE" label="经度" width="100"></el-table-column>
      <el-table-column prop="LATITUDE" label="纬度" width="100"></el-table-column>-->
      <!-- </el-table> -->
      <el-table
        :data="carList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
      >
        <!-- <el-table-column
        prop="VID"
        label="车牌号码"
        width="180">
        </el-table-column>-->
        <!-- <el-table-column prop="VID" label="ID" width="180"></el-table-column> -->
        <el-table-column prop="LICENSE_PLATE" label="车牌号码"></el-table-column>
        <el-table-column prop="CLIENT_NO" label="车辆编码"></el-table-column>
        <el-table-column prop="CAR_TYPE" label="车辆类型"></el-table-column>
        <el-table-column prop="WORKTYPE" label="负责点位类型"></el-table-column>
        <!-- <el-table-column
        prop="CAR_TYPE"
        label="车辆类型">
        </el-table-column>-->
        <!-- <el-table-column
        prop="TYPE"
        label="转运垃圾类型">
        </el-table-column>-->
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!-- <el-button
                  type="text"
                  @click="handleDelete(scope.$index, scope.row)" style="color:red"
            >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="carList.length"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <!-- 新增 -->
      <!-- <el-dialog v-dialogDrag title="新增" :visible.sync="adddialog" width="50%" style="height:100%">
        <el-form ref="addform" :model="addform" label-width="80px" class="flex">
          <el-form-item label="车牌号码：" :label-width="labelwidth" class="wid40" style="color: #45D2F7">
              <el-input v-model="addform.LICENSE_PLATE" placeholder="请输入车牌号码" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="分组：" :label-width="labelwidth" class="wid40">
              <el-input v-model="addform.grouping" placeholder="请输入分组" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="车辆名称：" :label-width="labelwidth" class="wid40">
              <el-input v-model="addform.vehiclename" placeholder="请输入车辆名称" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="通讯卡号：" :label-width="labelwidth" class="wid40">
              <el-input v-model="addform.communicationnumber" placeholder="请输入通讯卡号" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型：" :label-width="labelwidth" class="wid40">
              <el-input v-model="addform.CAR_TYPE" placeholder="请输入车辆类型" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="运输来源单位类型：" :label-width="labelwidth" class="wid40">
              <el-input v-model="addform.source" placeholder="请输入运输来源单位类型" class="handle-input mr10"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="adddialog = false">取 消</el-button>
          <el-button type="primary" @click="addlistdata(ruleForm)">确 定</el-button>
        </span>
      </el-dialog>-->
      <!-- 编辑 -->
      <el-dialog v-dialogDrag title="编辑" :visible.sync="editdialog" width="50%" style="height:100%">
        <el-form ref="editform" :model="editform" label-width="80px" class="flex">
          <!-- <el-form-item label="车牌号码：" :label-width="labelwidth" class="wid50" style="color: #45D2F7">
              <el-input v-model="editform.LICENSE_PLATE" placeholder="请输入车牌号码" class="handle-input mr10"></el-input>
          </el-form-item>-->
          <!-- <el-form-item label="车牌号码: " :label-width="labelwidth" class="wid50">
              <el-input v-model="editform.CLIENT_NO" placeholder="请输入分组" class="handle-input mr10"></el-input>
          </el-form-item>-->
          <!-- <el-form-item label="车辆类型：" :label-width="labelwidth" class="wid50">
              <el-input v-model="editform.CAR_TYPE" placeholder="请输入车辆名称" class="handle-input mr10"></el-input>
          </el-form-item>-->
          <el-form-item label="负责点位类型：" :label-width="labelwidth" class="wid50">
            <!-- <el-input v-model="editform.WORKTYPE" placeholder="请输入通讯卡号" class="handle-input mr10"></el-input> -->
            <el-select v-model="editform.WORKTYPE" placeholder="请选择">
              <el-option
                v-for="item in worktype"
                :key="item.index"
                :label="item.TYPE"
                :value="item.index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆编码：" :label-width="labelwidth" class="wid50">
            <el-select v-model="editform.CLIENT_NO" placeholder="请选择" style="width:88%">
              <el-option
                v-for="item in optionsplot"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="车辆类型：" :label-width="labelwidth" class="wid50">
              <el-input v-model="editform.vehicletype" placeholder="请输入车辆类型" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="运输来源单位类型：" :label-width="labelwidth" class="wid40">
              <el-input v-model="editform.source" placeholder="请输入运输来源单位类型" class="handle-input mr10"></el-input>
          </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editdialog = false">取 消</el-button>
          <el-button type="primary" @click="addlistdata(editform)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@/assets/css/common.css'
export default {
  data () {
    return {
      adddialog: false,
      editdialog: false,
      currentPage: 1,
      labelwidth: '120px',
      pageSize: 10,
      userList: [],
      editform: {},
      addform: {},
      // 原始数据
      originalData: [],
      carList: [],
      worktype: [{
        TYPE: '小区',
        index: 1
      }, {
        TYPE: '沿街商铺',
        index: 2
      }, {
        TYPE: '大中型餐饮单位',
        index: 3
      }],
      selectWorktype: [{
        TYPE: '全部',
        index: ''
      }, {
        TYPE: '小区',
        index: '小区'
      }, {
        TYPE: '沿街商铺',
        index: '沿街商铺'
      }, {
        TYPE: '大中型餐饮单位',
        index: '大中型餐饮单位'
      }],
      options_selectDate: [{
        value: '上月',
        label: '上月'
      }, {
        value: '本月',
        label: '本月'
      }],
      WORKTYPE: [{ TYPE: '小区', index: 1 }, { TYPE: '沿街商铺', index: 2 }, { TYPE: '大中型餐饮单位', index: 3 }],
      options_selectDistrict: [],
      selectDate: '上月',
      selectDistrict: '',
      cartype: '',
      carnumber: '',
      carWorktype: '',
      optionsplot: []
    }
  },
  created () {
    // this.loadSelectionDistrict()
    this.getvegucle()
    this.getclient()
    this.getvallage()
    // console.log(this.$url)
  },
  methods: {
    // 获取小区列表
    getvallage () {
      this.$axios({
        url: this.$url + 'GetVallageApi',
        method: 'get'
      }).then(res => {
        // console.log(res.data)
      })
    },
    // 获取区域列表
    getclient () {
      this.$axios({
        url: this.$url + 'GetClientListApi',
        method: 'get'
      }).then(res => {
        // console.log(res.data)
        this.optionsplot = res.data
      })
    },
    // 获取车辆基础信息列表
    getvegucle () {
      this.$axios({
        url: this.$url + 'GetVehicleListApi',
        method: 'get'
      }).then(res => {
        // console.log(res.data)
        // this.originalData = Object.assign([], res.data)
        this.originalData = res.data.filter(item => {
          // console.log(item)
          if (item.WORKTYPE == '1') {
            item.WORKTYPE = '小区'
          } else if (item.WORKTYPE == '2') {
            item.WORKTYPE = '沿街商铺'
          } else if (item.WORKTYPE == '3') {
            item.WORKTYPE = '大中型餐饮单位'
          }
          return item
        })
        this.mohu()
      })
    },
    // 获取垃圾点列表
    getplace () {
      this.$axios({
        url: this.$url + 'GetPlacePointApi',
        method: 'get'
      }).then(res => {
        console.log(res.data)
      })
    },
    // 模糊查询
    mohu () {
      console.log(this.carWorktype)
      this.carList = this.originalData
      if (this.carnumber) {
        this.carList = this.carList.filter(item => item.LICENSE_PLATE.includes(this.carnumber))
      }
      if (this.cartype) {
        this.carList = this.carList.filter(item => item.CAR_TYPE.includes(this.cartype))
      }
      if (this.carWorktype) {
        this.carList = this.carList.filter(item => item.WORKTYPE === this.carWorktype)
      }
    },
    // 新增弹出框
    addlistdatadiglog () {
      this.adddialog = true
    },
    // 新增保存
    addlistdata () {
      let studenteList = this.editform;
      console.log(studenteList)
      this.$axios({
        // this.$url+ 'UpdateVehicleCCApi'
        url: this.$url + 'UpdateVehicleCCApi',
        method: 'get',
        params: {
          workType: studenteList.WORKTYPE,
          ClientNo: studenteList.CLIENT_NO,
          vid: studenteList.VID
        }
      }).then(res => {
        console.log(res.data)
        if (res.data.IsSucess) {
          this.$message.success('编辑成功')
          this.editdialog = false
          this.getvegucle()
        }
      })
    },
    // 编辑弹出框
    handleEdit (index, row) {
      // console.log(index, row)
      this.editdialog = true
      this.editform = Object.assign({}, row)
    },
    // 删除
    handleDelete (index, row) {
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
          this.carList.splice(index, 1)
        })
        .catch(() => { })
    },
    handlePageChange (currentPage) {
      this.currentPage = currentPage
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size
      console.log(this.pageSize)
    }
  }
}
</script>

<style>
.content {
  overflow-y: scroll;
}
.el-form-item__label {
  height: 32px;
  line-height: 32px;
}
.el-input__inner {
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
}
/* 弹出框 */
.el-dialog {
  background: #ccd8e7;
  padding: 0px 10px;
}
.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
.el-dialog__body {
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-dialog__footer {
  padding: 10px 0px;
}
</style>
